<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="false"
      bordered
      :scroll="{ x: '500' }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'phone'">
          <a-table
            :show-header="false"
            :data-source="record.list"
            :columns="innerColums"
            :pagination="false"
            class="innerTable"
          >
          </a-table>
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <Button
            type="primary"
            class="!text-sm"
            size="small"
            @click="edit(record)"
          >
            编辑
          </Button>
        </template>
      </template>
    </a-table>
  </div>

  <!-- 弹窗 -->
  <a-modal v-model:visible="visible" title="编辑" width="800px" :footer="null">
    <p>回移前</p>
    <a-form class="grid grid-cols-4" layout="vertical" :model="updateParams">
      <a-form-item label="姓名">
        <a-input placeholder="请输入姓名" v-model:value="updateParams.name" />
      </a-form-item>
      <a-form-item label="年龄">
        <a-input placeholder="请输入年龄" v-model:value="updateParams.age" />
      </a-form-item>
      <a-form-item label="电话">
        <a-input placeholder="请输入电话" v-model:value="updateParams.tel" />
      </a-form-item>
      <a-form-item label="地址">
        <a-input placeholder="请输入地址" v-model:value="updateParams.address" />
      </a-form-item>
    </a-form>
    <p>回移后</p>
    <template v-for="item in updateParams.list">
      <a-form-item label="姓名">
        <a-input placeholder="请输入姓名" v-model="item.phone"/>
      </a-form-item>
      <a-form-item label="地址">
        <a-input placeholder="请输入年龄" v-model="item.address"/>
      </a-form-item>
      <a-form-item label="电话">
        <a-input placeholder="请输入电话" v-model="item.tel"/>
      </a-form-item>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { Table as aTable, Button } from "ant-design-vue";
import { ref } from "vue";

const data = [
  {
    key: "1",
    name: "AAA",
    age: 32,
    tel: "0571-22098909",
    phone: 18889898989,
    address: "New York No. 1 Lake Park",
    list: [
      {
        phone: "item1",
        address: 18,
        aaa: "一行1",
        bbb: "二行1",
      },
      {
        phone: "item2",
        address: 19,
        aaa: "一行2",
        bbb: "二行2",
      },
      {
        phone: "item3",
        address: 20,
        aaa: "一行3",
        bbb: "二行3",
      },
    ],
  },
  {
    key: "2",
    name: "AAA",
    age: 32,
    tel: "0571-22098333",
    phone: 18889898888,
    address: "London No. 1 Lake Park",
  },
];

const innerColums = [
  {
    title: "Phone",
    dataIndex: "phone",
    key: "phone",
    width: 200,
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
    width: 200,
  },
  {
    title: "一行",
    dataIndex: "aaa",
    key: "address",
    width: 200,
  },
  {
    title: "二行",
    dataIndex: "bbb",
    key: "address",
    width: 200,
  },
];
const columns = [
  {
    title: "Key",
    dataIndex: "key",
    key: "key",
    width: 100,
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    width: 150,
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    width: 100,
  },
  {
    title: "Tel",
    dataIndex: "tel",
    key: "tel",
    width: 150,
  },
  {
    title: "主数据",
    children: [
      {
        title: "Phone",
        dataIndex: "phone",
        key: "phone",
        width: 150,
        customCell: () => {
          return { colSpan: 4 };
        },
      },
      {
        title: "Address",
        dataIndex: "address",
        key: "address",
        width: 200,
        customCell: () => {
          return { colSpan: 0 };
        },
      },
      {
        title: "一行",
        dataIndex: "aaa",
        key: "address",
        width: 200,
        customCell: () => {
          return { colSpan: 0 };
        },
      },
      {
        title: "二行",
        dataIndex: "bbb",
        key: "address",
        width: 200,
        customCell: () => {
          return { colSpan: 0 };
        },
      },
    ],
  },
  {
    title: "操作",
    dataIndex: "operation",
    width: 200,
  },
];

const visible = ref(false);
const updateParams = ref();
const edit = (val: any) => {
  console.log(val);
  updateParams.value = val;
  visible.value = true;
};
</script>
<style scoped>
:deep(.innerTable .ant-table) {
  margin-inline: 0 !important;
}
</style>
